<template>
  <div class="color-temperature-slider">
    <div class="progress-bar" :style="{ backgroundColor: bgColor }">
      <div class="progress" :style="{ width: progressWidth }"></div>
    </div>
    <input
      type="range"
      min="0"
      max="100"
      class="slider"
      @input="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: "ColorTemperatureSlider",
  props: {
    value: {
      type: Number,
      default: 50,
    },
    bgColor: {
      type: String,
      default: "#d6d6d6",
    },
  },
  computed: {
    progressWidth() {
      return `${this.value}%`;
    },
  },
  methods: {
    handleChange(event) {
      this.$emit("input", event.target.value);
    },
  },
};
</script>

<style scoped>
.color-temperature-slider {
  display: flex;
  align-items: center;
  width: 100%;
}

.progress-bar {
  height: 10px;
  width: 100%;
  border-radius: 20px;
  margin-right: 10px;
}

.progress {
  height: 100%;
  border-radius: 20px;
}

.slider {
  width: 150px;
}
</style>
